<template>
	<view>
		<view style="display: flex;flex-wrap: wrap;width:100%;justify-content:flex-start;">
			<view v-for="(item,index) in List" :key="index"
				style="width: 180rpx;height: 180rpx;margin-top: 10rpx;margin-left: 7rpx;">
				<image mode="aspectFill" v-if="item.type=='image'"  @click="showPhoto(index)" class="Image" :src="item.url"></image>
				<video :src="item.url" v-if="item.type=='video'" controls
					class="Image" id="videoId" @play="play"
					@fullscreenchange="fullscreenchange"></video>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				List: [],
				videoContext: ''
			}
		},
		onshow() {
			this.httpRequest();
		},
		onLoad(options) {
			//console.log("options",options,"---")
			this.wid = options.wid; //存储计师id
			//console.log(this.wid,"wid")
			this.httpRequest();
		},
		methods: {
			// 播放时进入全屏
			play(index) {
				this.videoContext = uni.createVideoContext('videoId')
				this.videoContext.requestFullScreen()
			},
			//退出全屏时暂停
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					uni.createVideoContext('videoId', this).pause();
				}
			},
			//退出全屏时停止
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					this.videoContext.pause()
				}
			},
			banimg(arrs, ind) {
				let that = this 
				let arr = arrs
				let index = ind
				let i = 0
				let a = []
				fac()
				function fac() {
					if (i < arr.length) {
						wx.getImageInfo({
							src: arr[i].url,
							success: () => {
								let img = {
									type: 'image',
									url: arr[i].url,
								}
								a.unshift(img)
								i++
								return fac()
							},
							fail: () => {
								let video = {
									type: 'video',
									url: arr[i].url
								}
								a.push(video)
								i++
								return fac()
			
							},
							complete: () => {
								//这里是最终操作,把结果放到date里面什么的
								that.List  = a 
							}
						})
					}
				}
			},
			showPhoto(index) {
				let urls = [];
				// // //console.log()
				for (var i = 0; i < this.List.length; i++) {
					urls.push(this.List[i].url)
				}
				uni.previewImage({
					current: index,
					urls: urls
				});
			},
			httpRequest() {
				let that = this 
				this.$request("kehu/jishi/photoList", {
					wid: this.wid
				}).then(res => {
					this.List = res.data;
					that.banimg(that.List,that.List.length)					
				});
			},
		}
	}
</script>

<style class="scss">
	.Grid {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		align-content: space-between;
		background: #f7f7f7;
		padding: 10rpx;

	}

	.Grid-Item {
		width: 25%;
		height: 190rpx;
		text-align: center;
		border: 0rpx solid #ccc;
		box-sizing: border-box;


	}

	.GSimg {
		width: 90rpx;
		height: 90rpx;
		margin-top: 2rpx;
		margin-left: 0rpx;

	}

	.Image {
		width: 175rpx;
		height: 175rpx;
		border-radius: 10rpx;
	}
</style>